<template>
    <div class="time-input">
        <input type="text" maxlength="2" v-model="hours" @input="updateTime('hours')"
            @keydown.delete="handleKeyDown('hours')" ref="hoursInput" />
        <span class="font">:</span>
        <input type="text" maxlength="2" v-model="minutes" @input="updateTime('minutes')"
            @keydown.delete="handleKeyDown('minutes')" ref="minutesInput" />
        <span class="font">:</span>
        <input type="text" maxlength="2" v-model="seconds" @input="updateTime('seconds')"
            @keydown.delete="handleKeyDown('seconds')" ref="secondsInput" />
        <span class="font">.</span>
        <input type="text" maxlength="3" v-model="milliseconds" @input="updateTime('milliseconds')"
            @keydown.delete="handleKeyDown('milliseconds')" ref="millisecondsInput" />
    </div>
</template>

<script>
export default {
    props: {
        value: {
            type: String,
            default: '', // 默认值为空字符串
        }
    },
    data() {
        return {
            hours: '',
            minutes: '',
            seconds: '',
            milliseconds: '',
        };
    },
    watch: {
        value(newValue) {
            // 如果父组件传入的值发生变化，则更新子组件内部的时间值
            const parts = newValue.split(':').map(part => parseInt(part));
            if (parts.length === 4) {
                [this.hours, this.minutes, this.seconds, this.milliseconds] = parts;
            }
        },
    },
    methods: {
        updateTime(field) {
            this[field] = this[field].replace(/[^\d]/g, ''); // 只保留数字

            // 当输入框字符数量达到两个时，自动跳到下一个输入框
            if (this[field].length === 2) {
                switch (field) {
                    case 'hours':
                        this.$refs.minutesInput.focus(); // 光标到具有这个ref的input上
                        break;
                    case 'minutes':
                        this.$refs.secondsInput.focus();
                        break;
                    case 'seconds':
                        this.$refs.millisecondsInput.focus();
                        break;
                    case 'milliseconds':
                        break;
                }
            }
            let clear = false
            this.acquireValue(clear)
        },
        acquireValue(clear) {
            if (clear) {
                this.hours = ''
                this.minutes = ''
                this.seconds = ''
                this.milliseconds = ''
            } else {
                // 将输入的值转换为两位数形式
                const pad = (num) => num.toString().padStart(2, '0');
                // 更新时间格式
                const formattedTime = `${pad(this.hours)}:${pad(this.minutes)}:${pad(this.seconds)}.${pad(this.milliseconds)}`;
                return formattedTime;
            }
        },
        handleKeyDown(value) {
            if (this[value].length === 0) {
                switch (value) {
                    case 'milliseconds':
                        this.$refs.secondsInput.focus();
                        break;
                    case 'seconds':
                        this.$refs.minutesInput.focus();
                        break;
                    case 'minutes':
                        this.$refs.hoursInput.focus();
                        break;
                    case 'hours':
                        break;
                }
            }
        },
    },
};
</script>

<style>
.time-input {
    display: flex;
    align-items: center;
    border-radius: 5px;
    border: 1px solid rgb(168 171 179 / 41%);
}

.time-input input {
    width: 40px;
    text-align: center;
    /* border-radius: 5px; */
    height: 26px;
    border: none;
    outline: none;
    /* border-bottom: 1px solid rgba(70, 72, 77, 0.41); */
    /* border: 1px solid rgb(168 171 179 / 41%); */
    color: #606266;
}

/* .time-input input:focus {
    border: .1rem #409eff solid;
    outline: none;
} */

.time-input span {
    margin: 0 5px;
}

.font {
    font-weight: bold;
}
</style>
<!-- <template>
    <input v-model="inputValue" :maxlength="maxLength" class="inputcss" @input="handleInput">
</template>

<script>
export default {
    props: {
        value: {
            type: String,
            default: ''
        },
        maxLength: {
            type: Number,
            default: 12
        }
    },
    data() {
        return {
            inputValue: this.value.toString(),
            isFocused: false
        };
    },
    methods: {
        handleInput(event) {
            let value = event.target.value;
            const formattedValue = this.formatInput(value);
            this.inputValue = formattedValue; // 在组件中更新输入值
            this.$emit('input', formattedValue); 
        },
        formatInput(value) {
            let formattedValue = value.replace(/[^\d]/g, '') // 只保留数字
                .substring(0, this.maxLength)

            // 自动插入 ":" 和 "."
            if (formattedValue.length >= 2) {
                formattedValue = formattedValue.substring(0, 2) + ":" + formattedValue.substring(2);
            }
            if (formattedValue.length >= 5) {
                formattedValue = formattedValue.substring(0, 5) + ":" + formattedValue.substring(5);
            }
            if (formattedValue.length >= 8) {
                formattedValue = formattedValue.substring(0, 8) + "." + formattedValue.substring(8);
            }

            // 处理删除操作
            const lastChar = formattedValue.charAt(formattedValue.length - 1);
            if (lastChar === ':' || lastChar === '.') {
                // 如果最后一个字符是冒号或小数点，则删除它
                formattedValue = formattedValue.substring(0, formattedValue.length - 1);
            }
            return formattedValue;
        }
    }
};
</script>

<style lang="less" scoped>
.inputcss {
    width: 100%;
    text-indent: 7px;
    height: 32px;
    border-radius: 5px;
    border: 1px solid rgb(168 171 179 / 41%);
    color: #606266;
}

.inputcss:focus {
    border: .1rem #409eff solid;
    outline: none;
}
</style> -->